<template>



	<div class="system-userDataDimensionView-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1300px">
			<el-card shadow="hover">
				<div class="bar_tools">
					<div>数据权限列表</div>
					<el-button-group class="ml-4">
						<el-button type="primary" size="default" @click="handleAdd()">添加</el-button>
					</el-button-group>
				</div>
				<el-table size="default" :data="state.dataList" style="width: 100%">
					<el-table-column label="数据编码">
						<template #default="scope">
							<span>{{ scope.row.dataDimension }}</span>
						</template>
					</el-table-column>

					<el-table-column label="数据维度">
						<template #default="scope">
							<el-select size="default" v-model="scope.row.dataDimension">
								<el-option v-for="item in state.dataDimensionList" :key="item.dicItemValue"
									:label="item.dicItemName" :value="item.dicItemValue" />

							</el-select>
						</template>
					</el-table-column>
					<el-table-column label="维度值">
						<template #default="scope">
							<el-input size="default" v-model="scope.row.dataDimensionValue">
								<span>{{ scope.row.dataDimensionValue }}</span>
							</el-input>
						</template>
					</el-table-column>

					<el-table-column label="状态">
						<template #default="scope">
							<el-select size="default" v-model="scope.row.status">
								<el-option v-for="item in state.statusList" :key="item.dicItemValue"
									:label="item.dicItemName" :value="item.dicItemValue" />
							</el-select>
						</template>
					</el-table-column>
				</el-table>
			</el-card>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确定</el-button>
				</span>
			</template>

		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';


// 导入接口
import { useSysApi } from "../../../api/sys";





const state = reactive({
	statusList: [] as any,
	dataDimensionList: [] as any,
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	dataList: [] as any,
	referId: "",
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});




// 打开弹窗
const openDialog = async (row: any) => {
	state.referId = row.roleId;
	await queryUserDataDimensionList();

	// console.log(row)

	state.dialog.title = `角色编码：${row.roleCode}　　　角色名称：${row.roleName}`;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


const queryUserDataDimensionList = async () => {

	state.dataList = [];
	let tempList = await useSysApi().queryUserDataDimensionList(state.referId, 10);
	tempList.forEach((element: any) => {
		element.status = element.status.toString();
		state.dataList.push(element)
	});
}


const handleAdd = () => {
	state.dataList.push({
		referId: state.referId,
		dataDimensionType: 10,
		dataDimensionValue: "",
		status: "1",
	});
}



// 取消
const onCancel = () => {
	closeDialog();
};


// 提交
const onSubmit = async () => {


	try {
		await useSysApi().userDataDimensionInsertOrUpdateBatch(state.dataList);
		ElMessage.success("操作成功");
		closeDialog(); // 关闭弹窗
	} catch (error: any) {
		ElMessage.error("操作失败请稍后再试");
	}






}


const selectDicItemsByDicCode = async () => {
	state.statusList = await useSysApi().selectDicItemsByDicCode("commStatus", "General");
	state.dataDimensionList = await useSysApi().selectDicItemsByDicCode("data_dimension", "General");
}


const getDic = (obj: any, str: string) => {
	let strTemp = str;

	state[obj.toString()].forEach((element: any) => {
		if (element.dicItemValue == str) {
			strTemp = element.dicItemName;
		}
	});
	return strTemp;
}



watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
			selectDicItemsByDicCode();
		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-userDataDimensionView-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}
}
</style>